<template>
	<div>
		<Modal
			:mask-closable="false"
			v-model="visible"
			width="1000"
			class="addModal modal-content-item-layout"
			:title="!id ? '新增点检配置项' : '编辑点检配置项'"
		>
			<div class="addProject">
				<!-- <div class="titleItem content-item">
					<span class="content-item-title">点检对象</span>
					<div class="checkObject pd16">
						<div class="checkObjectItem">
							<div class="checkObjectName" :class="{ required: true }">
								{{ $t('equipCheck.SerialNo') }}
							</div>
							<div class="checkObjectValue">
								<Select
									v-model="formInline.deviceMId"
									filterable
									clearable
									class="select"
									@on-change="deviceMIdChange"
									:placeholder="`${$t('common.inputInfo')}${$t('equipCheck.SerialNo')}`"
									:remote-method="handleRemote"
								>
									<Option v-for="item in deviceMIdList" :value="item.deviceMId" :label="item.desc" :key="item.id" />
								</Select>
							</div>
						</div>
						<div class="checkObjectItem">
							<div class="checkObjectName" :class="{ required: true }">
								{{ $t('设备等级') }}
							</div>
							<div class="checkObjectValue">
								<Select
                  v-model="formInline.deviceGrade"
                  filterable
                  @on-change="categorySelectChange"
                  clearable
                  :placeholder="`${$t('common.selectInfo')}`"
                  class="select"
                >
                  <Option
                    v-for="v in deviceList"
                    :value="v.value"
                    :key="v.value"
                    :label="v.label"
                  />
                </Select>
								<Input readonly v-model="formInline.deviceGrade"></Input>
							</div>
						</div>
						<div class="checkObjectItem">
							<div class="checkObjectName" :class="{ required: true }">
								{{ $t('设备类别') }}
							</div>
							<div class="checkObjectValue">
								<Select
                  v-model="formInline.deviceCategory"
                  filterable
                  clearable
                  class="select"
                  @on-query-change="queryChange"
                  @on-create="createType"
                  :placeholder="`${$t('common.selectInfo')}`"
                  @on-change="deviceNameChange"
                >
                  <Option
                    v-for="(item, index) of deviceTypeList"
                    :value="item.value"
                    :key="index"
                    :label="item.value"
                  />
                </Select>
								<Input readonly v-model="formInline.deviceCategory"></Input>
							</div>
						</div>
					</div>
				</div> -->
				<div class="titleItem content-item">
					<span class="content-item-title">{{ $t('点检SOP') }}</span>
					<div class="checkObject pd16">
						<div class="checkObjectItem">
							<Row style="width: 100%">
								<Col span="3">
									<van-uploader accept="*" :show-upload-list="false" :after-read="afterRead">
										<template #preview-cover="{ file }">
											<span class="text">{{ $t('maintenance.New') }}</span>
										</template>
									</van-uploader>
								</Col>
								<Col span="21" v-if="tarGetattachment && tarGetattachment.length">
									<div class="fujianList">
										<div v-for="(list, index) in tarGetattachment" :key="index" class="item" @click="previewClicjk(list, index, tarGetattachment)">
											<template v-if="util.fileType(list.fileName) === 'image'">
												<img :src="util.filePathToUrl(list.filePath)" />
											</template>
											<template v-else-if="util.fileType(list.fileName) === 'video'">
												<video preload="auto" loop autoplay muted>
													<source :src="util.filePathToUrl(list.filePath)" type="video/mp4" />
												</video>
											</template>
											<template v-else>
												<span class="fileSty">{{ list.fileName }}</span>
											</template>
											<span class="dleIcon" @click.stop="deleteAttachment(list)">
												<Icon type="ios-close-circle-outline" />
											</span>
										</div>
									</div>
								</Col>
							</Row>
						</div>
					</div>
				</div>
				<div class="titleItem content-item">
					<span class="content-item-title">点检时间</span>
					<div class="checkObject pd16">
						<div class="checkObjectItem" style="flex: 1">
							<div class="checkObjectName" :class="{ required: true }">点检周期</div>
							<div class="checkObjectValue">
								<CheckboxGroup v-model="formInline.cycleUnit">
									<Checkbox v-for="(m, n) in weeks" :key="n" :label="m.label">{{ m.name }}</Checkbox>
								</CheckboxGroup>
							</div>
						</div>
					</div>
				</div>
				<div class="titleItem content-item">
					<span class="content-item-title">点检内容</span>
					<div class="checkObject pd16">
						<div class="checkObjectItem">
							<div class="checkObjectName" :class="{ required: true }">点检方式</div>
							<div class="checkObjectValue">
								<Input class="inputWrapper" :maxlength="250" v-model="formInline.checkMode" clearable />
							</div>
						</div>
						<div class="checkObjectItem">
							<div class="checkObjectName">
								{{ $t('显示顺序') }}
							</div>
							<div class="checkObjectValue">
								<InputNumber class="inputWrapper" v-model="formInline.sort" clearable />
							</div>
						</div>
						<div class="checkObjectItem" style="flex: 1">
							<div class="checkObjectName" :class="{ required: true }">点检项目</div>
							<div class="checkObjectValue">
								<Input class="inputWrapper" :maxlength="100" v-model="formInline.checkName" clearable />
							</div>
						</div>
					</div>

					<div class="checkObject pd16">
						<div class="checkObjectItem">
							<!-- @on-change="deviceNameChange" -->
							<div class="checkObjectName" :class="{ required: true }">设备类别</div>
							<div class="checkObjectValue">
								<Select
									v-model="formInline.deviceType"
									filterable
									clearable
									class="select"
									@on-query-change="queryChange"
									@on-create="createType"
									:placeholder="`${$t('common.selectInfo')}`"
								>
									<Option v-for="(item, index) of deviceTypeList" :value="item.value" :key="index" :label="item.value" />
								</Select>
							</div>
						</div>
						<div class="checkObjectItem"></div>
						<div class="checkObjectItem"></div>
					</div>

					<!-- 
					<div class="checkObjectItem">
							<div class="checkObjectName" :class="{ required: true }">
								{{ $t('设备类别') }}
							</div>
							<div class="checkObjectValue">
							
								<Input readonly v-model="formInline.deviceCategory"></Input>
							</div>
						</div> -->
				</div>

				<div class="titleItem content-item">
					<span class="content-item-title">点检标准</span>
					<div class="checkObject pd16">
						<div class="checkObjectItem">
							<div class="checkObjectName" :class="{ required: true }">需求人数</div>
							<div class="checkObjectValue">
								<InputNumber :max="9999" class="inputNumberWrapper" v-model="formInline.reqPNum" clearable />
							</div>
						</div>
						<div class="checkObjectItem">
							<div class="checkObjectName" :class="{ required: true }">标准工时(s)</div>
							<div class="checkObjectValue">
								<InputNumber class="inputNumberWrapper" :min="0" :max="9999999999999999999" v-model="formInline.manHour" clearable />
							</div>
						</div>
						<div class="checkObjectItem" style="flex: 1">
							<div class="checkObjectName" :class="{ required: true }">点检标准</div>
							<div class="checkObjectValue">
								<Input class="inputWrapper" v-model="formInline.checkStandard" clearable />
							</div>
						</div>
					</div>
				</div>
				<div class="titleItem tab content-item">
					<span class="content-item-title">{{ $t('maintenance.usetools') }}</span>
					<div class="icon" @click="handleUseTools"><Icon type="md-add" color="#187BDB" />{{ $t('maintenance.AddTools') }}</div>
					<div class="tableContent pd16" style="width: 100%">
						<Table
							class="resizable-table"
							border
							@on-column-width-resize="
								(a, b, c, d) => {
									onColumnWidthResize(a, b, c, d, 'AddToolsmodaltable');
								}
							"
							ellipsis
							ref="selection"
							:columns="columns"
							:data="toolsData"
						>
							<template slot-scope="{ row, index }" slot="deviceNum">
								<div v-if="!row.isEdit">
									<Row>
										<Col :span="20">
											<span>{{ row.deviceNum }}</span>
										</Col>
										<Col :span="4">
											<Icon type="ios-brush-outline" size="18" color="#180fff" @click="handleToolsEdit(row, index)"></Icon>
										</Col>
									</Row>
								</div>
								<div v-else>
									<Row>
										<Col :span="20">
											<InputNumber :min="1" v-model="row.deviceNum" />
										</Col>
										<Col :span="4">
											<Icon
												type="ios-checkmark"
												size="35"
												color="#180fff"
												@click="handleUnToolsEdit(row, index)"
												style="display: inline-block"
											></Icon>
										</Col>
									</Row>
								</div>
							</template>
							<template slot-scope="{ row }" slot="action">
								<span class="operationBtn" @click="handleToolsDelete(row)">{{ $t('common.Delete') }}</span>
							</template>
						</Table>
					</div>
				</div>

				<div class="titleItem tab content-item">
					<span class="content-item-title">{{ $t('maintenance.Usematerial') }}</span>
					<div class="icon" @click="handleMaterial"><Icon type="md-add" color="#187BDB" />{{ $t('maintenance.Addmaterial') }}</div>
					<div class="tableContent pd16" style="width: 100%">
						<Table
							class="resizable-table"
							border
							@on-column-width-resize="
								(a, b, c, d) => {
									onColumnWidthResize(a, b, c, d, 'Addmaterialmodaltable');
								}
							"
							ellipsis
							ref="selection"
							:columns="materColumns"
							:data="materData"
						>
							<template slot-scope="{ row, index }" slot="num">
								<div v-if="!row.isEdit">
									<Row>
										<Col :span="20">
											<span>{{ row.materialNum }}</span>
										</Col>
										<Col :span="4" v-if="!row.numStatus">
											<Icon type="ios-brush-outline" size="18" color="#180fff" @click="handleToolsEdit(row, index)" />
										</Col>
									</Row>
								</div>
								<div v-else>
									<Row>
										<Col :span="20">
											<InputNumber :min="1" v-model="row.materialNum" />
										</Col>
										<Col :span="4">
											<Icon type="ios-checkmark" size="35" color="#180fff" @click="handleMaterEdit(row, index)" style="display: inline-block" />
										</Col>
									</Row>
								</div>
							</template>
							<template slot-scope="{ row }" slot="action">
								<span class="operationBtn" @click="handlemDelete(row)">{{ $t('common.Delete') }}</span>
							</template>
						</Table>
					</div>
				</div>

				<use-tools-modal ref="userToolsModal" @handleSelectUseTools="handleSelectUseTools" />
				<use-goods-modal ref="userGoodsModal" @handleUseGoodsOk="handleUseGoodsOk" />
			</div>

			<div slot="footer">
				<Button type="default" @click="visible = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" :loading="loadingVisible" @click="handleOk">{{ $t('maintenance.Confirmed') }}</Button>
			</div>
		</Modal>
		<!-- 添加工具 -->
		<Modal :mask-closable="false" v-model="arrVisible" width="640" class="addModal modal-content-layout" :title="$t('maintenance.AddTools')">
			<div class="addProject">
				<Form label-position="top">
					<FormItem :label="$t('maintenance.Materialno')" required>
						<Select filterable clearable v-model="tablefrom.deviceMId" :remote-method="toolcodeChange" @on-change="toolChange">
							<Option v-for="item in toolList" :value="item.deviceMId" :label="item.deviceMId" :key="item.deviceMId" />
						</Select>
					</FormItem>
					<FormItem :label="$t('maintenance.ToolName')" required>
						<Input class="inputWrapper" v-model="tablefrom.deviceName" clearable />
					</FormItem>
					<FormItem :label="$t('spareParts.quantity')" required>
						<InputNumber :min="1" v-model="tablefrom.deviceNum" />
					</FormItem>
					<FormItem :label="$t('保管方式')">
						<Input class="inputWrapper" v-model="tablefrom.keepWay" clearable />
					</FormItem>
				</Form>
			</div>

			<div slot="footer">
				<Button type="default" @click="close">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" @click="addTableobj">{{ $t('maintenance.Confirmed') }}</Button>
			</div>
		</Modal>
		<!-- 物料 -->
		<Modal
			:mask-closable="false"
			v-model="materialVisible"
			width="640"
			class="addModal modal-content-layout"
			:title="`${$t('maintenance.materialinfo')}`"
		>
			<div class="addProject">
				<Form label-position="top">
					<FormItem :label="$t('maintenance.MaterialnoInfo')" required>
						<Select filterable clearable v-model="tableMaterial.materialCode" :remote-method="materielNoChange" @on-change="materieChange">
							<Option v-for="item in materielNoList" :value="item.materialCode" :label="item.materialCode" :key="item.materialCode" />
						</Select>
					</FormItem>
					<FormItem :label="$t('common.GoodsName')" required>
						<Input class="inputWrapper" readonly v-model="tableMaterial.materialName" />
					</FormItem>
					<FormItem :label="$t('common.Specification')">
						<Input class="inputWrapper" readonly v-model="tableMaterial.specification" />
					</FormItem>
					<FormItem :label="$t('spareParts.quantity')" required>
						<InputNumber :min="1" :disabled="tableMaterial.numStatus" v-model="tableMaterial.materialNum" />
					</FormItem>
				</Form>
			</div>

			<div slot="footer">
				<Button type="default" @click="materiaClose">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" @click="materiaTableobj">{{ $t('maintenance.Confirmed') }}</Button>
			</div>
		</Modal>

		<Modal :mask-closable="false" v-model="delFaultCodeShowF" title="">
			<Row class="enableContent">
				<Col span="24" class="enableContentInner">
					<img width="95px" src="~images/event/del.png" alt="" />
				</Col>
				<Col span="24" class="enableTips">
					<span>{{ messageStrA + ',' + messageStrB + '未添加,是否确认保存?' }}</span>
				</Col>
			</Row>
			<div slot="footer">
				<Button type="default" @click="delFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" @click="ConfirmeClick">{{ $t('maintenance.Confirmed') }}</Button>
			</div>
		</Modal>

		<gallery :images="galleryImages" :index="galleryIndex" @close="galleryIndex = null" />
		<iframeModalCompent
			v-if="iframeShow"
			:isStudy="false"
			:iframeShow="iframeShow"
			:iframeModalSrc="iframeModalSrc"
			@closeIframe="iframeShow = false"
		></iframeModalCompent>
	</div>
</template>

<script>
import { fileUpload } from '@/api/maintenance';
import iframeModalCompent from '@/views/knowledgeBase/modal/iframe.vue';
import VueGallery from 'vue-gallery';
import UseGoodsModal from './useGoodsModal';
import UseToolsModal from './useToolsModal';

import toggleTableOperation from '@/mixins/toggleTableOperation';
export default {
	name: 'addModal',
	mixins: [toggleTableOperation],
	components: {
		UseGoodsModal,
		UseToolsModal,
		gallery: VueGallery,
		iframeModalCompent,
	},
	props: [],
	data() {
		return {
			galleryIndex: null,
			galleryImages: [],
			messageStrA: '',
			messageStrB: '',
			triggerCycleInfo: '',
			toolList: [],
			deviceMIdList: [],
			delFaultCodeShowF: false,
			materielNoList: [],
			tableMaterial: {},
			tablefrom: {},
			materialVisible: false,
			arrVisible: false,
			id: '',
			formInline: {
				// cycleUnit: [],
				manHour: null,
			},
			visible: false,
			loadingVisible: false,
			deviceList: [
				{ label: 'A', value: 'A' },
				{ label: 'B', value: 'B' },
				{ label: 'C', value: 'C' },
			],
			// positionList: [],
			deviceNameList: [],
			classifyList: [],
			levels: [
				{ value: 1, label: '一级点检' },
				{ value: 2, label: '二级点检' },
				{ value: 3, label: '三级点检' },
			],
			weeks: [
				// { name: '班次', label: '7' },
				{ name: '日', label: '1' },
				{ name: '小时', label: '8' },
			],
			materColumns: [
				{
					type: 'index',
					width: 90,
					title: `${this.$t('common.index')}`,
					align: 'center',
				},
				{
					title: `${this.$t('maintenance.MaterialnoInfo')}`,
					key: 'materialCode',
					align: 'center',
					resizable: true,
					tooltip: true,
					width: 180,
				},
				{
					title: `${this.$t('common.GoodsName')}`,
					key: 'materialName',
					align: 'center',
					resizable: true,
					tooltip: true,
					width: 180,
				},
				{
					title: `${this.$t('spareParts.Specification')}`,
					key: 'specification',
					align: 'center',
					resizable: true,
					tooltip: true,
					width: 180,
				},
				{
					title: `${this.$t('spareParts.quantity')}`,
					key: 'materialNum',
					slot: 'num',
					width: 180,
					align: 'center',
					resizable: true,
				},
				// {
				//   title: `${this.$t('maintenance.unitprice')}`,
				//   key: 'unitPrice',
				//   align: 'center'
				// },
				{
					title: `${this.$t('common.operation')}`,
					key: 'action',
					align: 'center',
					slot: 'action',
					width: 180,
				},
			],
			columns: [
				{
					type: 'index',
					width: 90,
					title: `${this.$t('common.index')}`,
					align: 'center',
				},
				{
					title: `${this.$t('maintenance.ToolMaterialNo')}`,
					key: 'deviceMId',
					align: 'center',
					resizable: true,
					tooltip: true,
					width: 180,
				},
				{
					title: `${this.$t('maintenance.Toolnames')}`,
					key: 'deviceName',
					align: 'center',
					resizable: true,
					tooltip: true,
					width: 180,
				},

				{
					title: `${this.$t('spareParts.quantity')}`,
					key: 'deviceNum',
					slot: 'deviceNum',
					align: 'center',
					resizable: true,
					tooltip: true,
					width: 180,
				},
				{
					title: `${this.$t('保管方式')}`,
					key: 'keepWay',
					align: 'center',
					resizable: true,
					tooltip: true,
					width: 180,
				},
				{
					title: `${this.$t('common.operation')}`,
					key: 'action',
					align: 'center',
					slot: 'action',
					width: 180,
				},
			],
			materData: [],
			toolsData: [],
			deviceTypeList: [],
			wlData: [],
			tarGetattachment: [],
			deviceMId: '',
			iframeShow: false, // 预览弹窗
			iframeModalSrc: '',
		};
	},
	created() {
		this.getColumnWidth(this.materColumns, 'Addmaterialmodaltable');
		this.getColumnWidth(this.columns, 'AddToolsmodaltable');

		this.getFaultCategory('设备类别');
		// this.getDeviceList()
		// this.getPositionList()
		// this.getClassifyList()
	},
	methods: {
		debounceSerach(fn, delay) {
			let _this = this;
			return function f(...args) {
				if (_this.timeID) {
					clearTimeout(_this.timeID);
				}
				_this.timeID = setTimeout(() => {
					fn(args);
				}, delay);
			};
		},
		deviceMIdChange(val) {
			const obj = this.deviceMIdList.find((item) => item.deviceMId == val);
			if (obj) {
				this.formInline.deviceCategory = obj.deviceCategory;
				this.formInline.deviceGrade = obj.deviceGrade;
				this.formInline.deviceId = obj.id;
			}
		},
		handleRemote(query, source) {
			if (!query) {
				return;
			}
			let _query = query.split('-');
			if (Array.isArray(_query)) _query = _query[0];
			const deviceMId = _query;
			this.deviceMId = _query;
			this.axios({
				method: 'post',
				url: '/dms/device/page',
				data: {
					deviceMId: _query,
					pageNum: 1,
					pageSize: 99,
				},
			}).then((res) => {
				if (res.code === 200) {
					if (deviceMId === this.deviceMId) {
						this.deviceMIdList = res.data.records.map((item) => {
							item.desc = item.deviceMId + '-' + item.deviceName + '-' + item.deviceNo;
							return item;
						});
						if (source == 1) this.formInline.deviceMId = _query;
					}
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		toolNoChange(val) {
			this.axios({
				method: 'post',
				url: '/dms/device/page',
				data: {
					pageNum: 1,
					pageSize: 99,
					deviceType: '工具',
					deviceNo: val || null,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.toolNoList = res.data.records || [];
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		queryChange(val) {
			if (val) {
				this.formInline.deviceType = val;
			}
		},
		createType(val) {
			this.deviceTypeList.push({
				label: val,
				value: val,
			});
		},
		deleteAttachment(item) {
			this.tarGetattachment = this.tarGetattachment.filter((val) => val.filePath !== item.filePath);
		},
		previewClicjk(item, index, arr) {
			if (this.util.fileType(item.fileName) === 'file') {
				this.iframeShow = true;
				let origin = window.location.origin;

				let fileUrl = origin + this.util.filePathToUrl(item.filePath);
				this.iframeModalSrc = origin + `/fileServer/onlinePreview?url=${fileUrl}`;
			} else {
				if (this.galleryIndex) {
					this.galleryIndex = null;
				}
				let list = [];
				list = arr.filter((val) => this.util.fileType(val.fileName) !== 'file');
				this.galleryImages = list.map((val) => {
					let objPath = val.filepath || val.filePath;
					if (this.util.fileType(objPath) === 'video') {
						val.filetype = 'video/mp4';
					}
					if (this.util.fileType(objPath) === 'image') {
						val.filetype = 'image/jpeg';
					}
					return {
						type: val.filetype,
						href: this.util.filePathToUrl(val.filepath || val.filePath),
					};
				});
				this.galleryIndex = this.galleryImages.findIndex((val) => val.href === this.util.filePathToUrl(item.filepath || item.filePath));
			}
		},

		afterRead(file) {
			let formData = new FormData();
			formData.append('dir', 'device');

			formData.append('file', file.file);

			let config = {
				headers: {
					'Content-Type': 'multipart/form-data',
				},
			};
			// console.log(formData)
			fileUpload(formData, config).then((res) => {
				if (res.code == 200) {
					if (!res.data.fileLength) {
						return;
					}
					const data = [res.data].map((val) => ({
						itemId: this.id,
						fileName: val.fileName,
						filePath: val.filepath,
						fileUrl: val.fileUrl,
						previewPath: val.previewPath,
					}));
					this.tarGetattachment = this.tarGetattachment.concat(data);
				}
			});
		},
		handleUnToolsEdit(row) {
			this.$set(row, 'isEdit', false);
			this.toolsData.forEach((item) => {
				if (item.deviceId == row.deviceId) {
					item.deviceNum = row.deviceNum;
				}
			});
		},
		handleMaterEdit(row) {
			this.$set(row, 'isEdit', false);
			this.materData.forEach((item) => {
				if (item.materialId == row.materialId) {
					item.materialNum = row.materialNum;
				}
			});
		},
		handleToolsEdit(row) {
			this.$set(row, 'isEdit', true);
		},
		//获取故障数据
		getFaultCategory(name) {
			this.axios({
				method: 'get',
				url: '/dms/faultCategory/dictList',
				params: { name },
			}).then((res) => {
				if (res.code === 200) {
					if (name === '故障分类') {
						this.faultCategoryList = res.data.map((item) => {
							if (item.value) return item;
						});
					} else if (name === '设备类别') {
						this.deviceTypeList = res.data;
					}
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		deviceNameChange(val) {
			this.formInline.devicecategory = val;
			// this.materielNoList = [];
			// if (val) {
			//   this.materielNoChange("");
			// }
		},
		materieChange(val) {
			if (!val) {
				return;
			}
			const obj = this.materielNoList.find((item) => item.materialCode == val);
			if (obj) {
				this.tableMaterial = {
					isEdit: false,
					materialModel: obj.materialModel,
					materialCode: obj.materialCode,
					materialName: obj.materialName,
					materialMId: obj.materialMId,
					materialId: obj.id,
					materialNum: this.tableMaterial.materialNum,
				};
				if (obj.manageType == 1) {
					this.tableMaterial.materialNum = 1;
					this.tableMaterial.numStatus = true;
				}
			}
		},
		deviceNum(val) {
			this.tablefrom.deviceNum = val;
		},
		toolChange(val) {
			if (!val) {
				return;
			}
			const obj = this.toolList.find((item) => item.deviceMId == val);
			if (obj) {
				this.tablefrom = {
					isEdit: false,
					deviceId: obj.id,
					deviceName: obj.deviceName,
					deviceNum: this.tablefrom.deviceNum || 1,
					deviceMId: obj.deviceMId,
					keepWay: this.tablefrom.keepWay,
				};
			}
		},
		toolcodeChange(val) {
			if (!val) {
				return;
			}
			const fn = this.debounceSerach(() => {
				this.axios({
					method: 'post',
					url: '/dms/device/page',
					data: {
						pageNum: 1,
						pageSize: 99,
						deviceType: '工具',
						deviceMId: val || null,
					},
				}).then((res) => {
					if (res.code === 200) {
						if (res.data) {
							this.toolList = res.data.records;
						}
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				});
			}, 360);
			fn();
		},
		materielNoChange(val, value) {
			if (val && this.materielNoList.find((item) => item.materielNo + '-' + item.materialName === val)) {
				return;
			}

			const fn = this.debounceSerach(() => {
				const params = {
					materialCode: val,
					pageNum: 1,
					pageSize: 99,
				};
				this.axios({
					method: 'post',
					url: '/dms/material/page',
					data: { ...params },
				}).then((res) => {
					if (res.code === 200) {
						if (res.data) {
							this.materielNoList = res.data.records;
						}
						if (value) {
							this.formInline.bomId = Number(value);
						}
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				});
			}, 360);
			fn();
		},
		materiaClose() {
			this.materialVisible = false;
		},
		close() {
			this.arrVisible = false;
		},
		materiaTableobj() {
			if (!this.tableMaterial.materialCode) {
				this.$Message.error({
					content: '请填写工具物料号!',
					duration: 3,
					closable: true,
				});
				return;
			}
			// if (!this.tableMaterial.materialCode) {
			//   this.$Message.error({
			//     content: "请填写物料代码!",
			//     duration: 3,
			//     closable: true,
			//   });
			//   return;
			// }
			if (!this.tableMaterial.materialName) {
				this.$Message.error({
					content: '请填写品名!',
					duration: 3,
					closable: true,
				});
				return;
			}
			if (!this.tableMaterial.materialNum) {
				this.$Message.error({
					content: '请填写数量!',
					duration: 3,
					closable: true,
				});
				return;
			}
			const flag = this.materData.some((val) => val.materialId === this.tableMaterial.materialId);
			if (flag) {
				this.$Message.error({
					content: '该物料已添加',
					duration: 3,
					closable: true,
				});
				return;
			}
			this.materData.push(this.tableMaterial);
			this.materiaClose();
		},
		addTableobj() {
			if (!this.tablefrom.deviceId) {
				this.$Message.error({
					content: '请填写工具物料号!',
					duration: 3,
					closable: true,
				});
				return;
			}
			if (!this.tablefrom.deviceName) {
				this.$Message.error({
					content: '请填写工具名称!',
					duration: 3,
					closable: true,
				});
				return;
			}
			if (!this.tablefrom.deviceNum) {
				this.$Message.error({
					content: '请填写数量!',
					duration: 3,
					closable: true,
				});
				return;
			}
			const flag = this.toolsData.some((val) => val.deviceId === this.tablefrom.deviceId);
			if (flag) {
				this.$Message.error({
					content: '该工具已添加',
					duration: 3,
					closable: true,
				});
				return;
			}
			this.toolsData.push(this.tablefrom);
			this.arrVisible = false;
		},
		/**************基础数据**********************/
		categorySelectChange(categoryName) {
			if (categoryName) {
				this.axios({
					method: 'get',
					url: '/dms/dcmMaintainItem/queryDeviceNames',
					params: {
						categoryName,
					},
				}).then((res) => {
					if (res.code == 200) {
						this.deviceNameList = res.data.map((val) => ({
							label: val,
							value: val,
						}));
					}
				});
			}
		},

		getClassifyList() {
			this.axios({
				method: 'get',
				url: '/dms/dcmMaintainClassify/getSelectList',
				params: {},
			}).then((res) => {
				if (res.code === 200) {
					this.classifyList = res.data;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		show(row) {
			this.deviceMIdList = [];
			this.id = row.id;
			if (!this.id) {
				this.formInline = {
					checkSop: [],
					manHour: null,
					sort: 1,
					reqPNum: 1,
				};
				this.materData = [];
				this.toolsData = [];
				this.wlData = [];
				this.visible = true;
				this.tarGetattachment = [];
			} else {
				this.visible = true;
				this.getDetail(this.id);
			}
		},
		getDetail(id) {
			this.tarGetattachment = [];
			this.axios({
				method: 'get',
				url: '/dms/devSpotCheck/getDevSpotCheckById',
				params: {
					id,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.formInline.deviceMId = res.data.deviceMId;
					this.formInline.deviceId = res.data.deviceId;

					this.$nextTick(() => {
						this.formInline = {
							...res.data,
						};
						this.tarGetattachment = res.data.checkSop || [];
						this.toolsData = res.data.ddevSpotCheckDevRefs.map((item) => {
							return {
								...item,
								isEdit: false,
							};
						});
						this.materData = res.data.ddevSpotCheckMaterialRefs.map((item) => {
							return {
								...item,
								isEdit: false,
							};
						});
					});
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		handleToolsChange(row) {
			this.$set(row, 'isEdit', true);
		},
		handleToolsDelete(row) {
			this.toolsData = this.toolsData.filter((item) => item.deviceId != row.deviceId);
		},
		handlemDelete(row) {
			this.materData = this.materData.filter((item) => item.materialId != row.materialId);
		},
		handleUseTools() {
			this.arrVisible = true;
			this.tablefrom = {
				deviceNum: 1,
			};
			// this.$refs.userToolsModal.show()
		},
		handleMaterial() {
			this.tableMaterial = {
				materialNum: 1,
			};
			this.materielNoList = [];
			this.materialVisible = true;
		},
		handleSelectUseTools(data) {
			this.toolsData = [...this.toolsData, ...data];
		},
		handleUseGoods() {
			this.$refs.userGoodsModal.show();
		},
		handleUseGoodsOk(data) {
			this.wlData = [...this.wlData, ...data];
		},
		ConfirmeClick() {
			console.log(this.toolsData, this.materData, this.tarGetattachment);
			let data = {
				...this.formInline,
				// cycleUnit: this.triggerCycleInfo,
				ddevSpotCheckMaterialRefs: this.materData.map((item) => {
					return {
						materialId: item.materialId,
						materialNum: item.materialNum,
					};
				}),
				ddevSpotCheckDevRefs: this.toolsData.map((item) => {
					return {
						deviceId: item.deviceId,
						deviceNum: item.deviceNum,
						keepWay: item.keepWay,
					};
				}),
				checkSop: [...this.tarGetattachment],
			};
			this.loadingVisible = true;
			this.axios({
				method: 'post',
				url: !this.id ? '/dms/devSpotCheck/addDevSpotCheck' : '/dms/devSpotCheck/updateDevSpotCheck',
				data,
			})
				.then((res) => {
					if (res.code === 200) {
						this.visible = false;
						this.$emit('handleSearch');
						this.$Message.success({
							content: !this.id ? '新增成功！' : '编辑成功！',
							duration: 2,
							closable: true,
						});
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				})
				.finally(() => {
					this.loadingVisible = false;
				});
			this.delFaultCodeShowF = false;
		},
		handleOk() {
			if (
				// !this.formInline.deviceCategory ||
				// !this.formInline.deviceMId ||
				// !this.formInline.deviceGrade ||
				!this.formInline.checkStandard ||
				!this.formInline.checkName ||
				!this.formInline.checkMode ||
				!this.formInline.manHour ||
				// !this.formInline.cycleUnit ||
				!this.formInline.reqPNum
			) {
				this.$Message.warning({
					content: '请将信息填写完整！',
					duration: 6,
					closable: true,
				});
				return false;
			}
			let flag = false;
			if (!(this.materData && this.materData.length)) {
				flag = true;
				this.messageStrA = '使用物料';
			}
			if (!(this.toolsData && this.toolsData.length)) {
				flag = true;
				this.messageStrB = '使用工具';
			}
			if (flag) {
				this.delFaultCodeShowF = true;
			} else {
				this.ConfirmeClick();
			}
		},
	},
};
</script>
<style scoped lang="scss">
::v-deep .ivu-input-number {
	width: 100% !important;
}
</style>
<style lang="scss">
.addProject {
	.titleItem {
		position: relative;
		font-size: 18px;
		font-weight: bold;
		padding: 10px;
		.checkObject {
			display: flex;
			flex-wrap: wrap;
			padding: 20px 0;
			font-family: 'Arial Normal', 'Arial', sans-serif;
			font-weight: 400;
			font-style: normal;
			letter-spacing: normal;
			.checkObjectItem {
				display: flex;
				flex: 1;
				flex-wrap: wrap;
				align-items: center;
				.fujianList {
					width: 100%;
					overflow: hidden;
					height: 80px;
					// white-space:nowrap;
					overflow-x: scroll;
					//overflow-y: auto;
					//display: -webkit-box;
					&::-webkit-scrollbar {
						width: 0px;
						height: 0;
					}
					.item {
						cursor: pointer;
						float: left;
						// padding-left: 10px;
						width: 134px;
						height: 80px;
						position: relative;
						.fileSty {
							display: flex;
							justify-content: center;
							align-items: center;
							background: rgb(255, 237, 137);
							width: 100%;
							height: 100%;
						}
						.dleIcon {
							position: absolute;
							top: 0;
							right: 0;
							.ivu-icon {
								font-size: 21px;
								color: white;
							}
						}
						video {
							width: 100%;
							height: 100%;
							object-fit: fill;
						}
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
				.van-uploader {
					width: 100%;
					.van-uploader__wrapper {
						width: 100%;
						.van-uploader__upload {
							width: 100%;
							margin: 0 !important;
						}
					}
				}
				.checkObjectNameNone {
					border: none !important;
					background: #fff !important;
					width: 20% !important;
				}
				.checkObjectName {
					height: 40px;
					line-height: 40px;
					width: 100%;
					font-size: 13px;
					border: 1px solid #eeeeee;
					background: #f5f6f7;
					text-align: left;
					padding: 0 10px;
					color: #666666;
				}
				.required::before {
					content: '*';
					color: red;
				}
				.checkObjectValueNone {
					width: 70%;
				}
				.checkObjectValue {
					height: 40px;
					line-height: 40px;
					width: 100%;
					font-size: 13px;
					border: 1px solid #eeeeee;
					padding-left: 10px;
					color: #333;
					display: flex;
					align-items: center;
					.select {
						.ivu-select-selection {
							border: none;
							box-shadow: none;
							font-size: 13px;
						}
					}
					.inputWrapper {
						.ivu-input {
							border: none;
							box-shadow: none;
						}
					}
					.inputNumberWrapper {
						width: 100%;
						border: 0;
						box-shadow: none;
					}
				}
			}
		}
		.searchBox {
			.label {
				display: flex;
			}
		}
		.contentTable {
			padding: 20px;
		}
	}
	.titleItemNone::before {
		content: none !important;
	}
	.titleItem::before {
		display: none;
		//content: "";
		//position: absolute;
		//width: 3px;
		//height: 20px;
		//top: 13px;
		//left: 0px;
		//background: #187bdb;
	}
	.tab {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.icon {
			border: 1px solid #187bdb;
			border-radius: 30px;
			padding: 5px 20px 5px 20px;
			display: flex;
			align-items: center;
			//margin-left/*:*/ 20px;
			color: #187bdb;
			margin: 16px;
			cursor: pointer;
			i {
				font-size: 20px;
				font-weight: bold;
			}
		}
	}
}
</style>
